<template>
  <view class="list-container">
    <view class="header">
      <text class="title">数据列表</text>
      <text class="subtitle">下拉刷新获取更多数据</text>
    </view>
    
    <scroll-view 
      class="list-scroll"
      scroll-y
      refresher-enabled
      :refresher-triggered="isRefreshing"
      @refresherrefresh="onRefresh"
      @scrolltolower="onLoadMore"
    >
      <view class="list-content">
        <view 
          class="list-item"
          v-for="(item, index) in listData"
          :key="index"
          @tap="onItemClick(item)"
        >
          <view class="item-header">
            <image class="item-avatar" :src="item.avatar" mode="aspectFill" />
            <view class="item-info">
              <text class="item-title">{{ item.title }}</text>
              <text class="item-subtitle">{{ item.subtitle }}</text>
            </view>
            <text class="item-time">{{ item.time }}</text>
          </view>
          <view class="item-content">
            <text class="item-desc">{{ item.description }}</text>
            <view class="item-tags">
              <text 
                class="tag" 
                v-for="(tag, tagIndex) in item.tags" 
                :key="tagIndex"
              >
                {{ tag }}
              </text>
            </view>
          </view>
        </view>
        
        <view class="load-more" v-if="loading">
          <text class="loading-text">加载中...</text>
        </view>
        
        <view class="no-more" v-if="noMore">
          <text class="no-more-text">没有更多了</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { getListData } from '@/api/index.js'

export default {
  data() {
    return {
      listData: [],
      isRefreshing: false,
      loading: false,
      noMore: false,
      page: 1,
      pageSize: 10
    }
  },
  onLoad() {
    this.loadData()
  },
  methods: {
    async loadData(refresh = false) {
      if (refresh) {
        this.page = 1
        this.noMore = false
      }
      
      try {
        const res = await getListData({
          page: this.page,
          pageSize: this.pageSize
        })
        
        if (refresh) {
          this.listData = res.data.list
        } else {
          this.listData = [...this.listData, ...res.data.list]
        }
        
        if (res.data.list.length < this.pageSize) {
          this.noMore = true
        }
        
      } catch (error) {
        console.error('加载数据失败:', error)
        uni.showToast({
          title: '加载失败，请重试',
          icon: 'none'
        })
      }
    },
    
    onRefresh() {
      this.isRefreshing = true
      this.loadData(true).finally(() => {
        this.isRefreshing = false
      })
    },
    
    onLoadMore() {
      if (this.loading || this.noMore) return
      
      this.loading = true
      this.page++
      this.loadData().finally(() => {
        this.loading = false
      })
    },
    
    onItemClick(item) {
      uni.showModal({
        title: '提示',
        content: `点击了：${item.title}`,
        showCancel: false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.list-container {
  height: 100vh;
  background: #f5f5f5;
}

.header {
  background: #fff;
  padding: 40rpx;
  text-align: center;
  border-bottom: 1rpx solid #eee;
  
  .title {
    display: block;
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
  }
  
  .subtitle {
    display: block;
    font-size: 24rpx;
    color: #999;
  }
}

.list-scroll {
  height: calc(100vh - 120rpx);
}

.list-content {
  padding: 20rpx;
}

.list-item {
  background: #fff;
  border-radius: 15rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  &:active {
    background: #f9f9f9;
  }
}

.item-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  
  .item-avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    margin-right: 20rpx;
  }
  
  .item-info {
    flex: 1;
    
    .item-title {
      display: block;
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 5rpx;
    }
    
    .item-subtitle {
      display: block;
      font-size: 24rpx;
      color: #666;
    }
  }
  
  .item-time {
    font-size: 22rpx;
    color: #999;
  }
}

.item-content {
  .item-desc {
    display: block;
    font-size: 26rpx;
    color: #666;
    line-height: 1.5;
    margin-bottom: 15rpx;
  }
  
  .item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10rpx;
    
    .tag {
      background: #f0f0f0;
      color: #666;
      padding: 5rpx 15rpx;
      border-radius: 20rpx;
      font-size: 20rpx;
    }
  }
}

.load-more, .no-more {
  text-align: center;
  padding: 40rpx;
  
  .loading-text, .no-more-text {
    font-size: 24rpx;
    color: #999;
  }
}

/* 深色模式适配 */
.dark-theme {
  .list-container {
    background: #1a1a1a;
  }
  
  .header {
    background: #2c2c2c;
    border-bottom-color: #3a3a3a;
    
    .title {
      color: #fff;
    }
    
    .subtitle {
      color: #aaa;
    }
  }
  
  .list-item {
    background: #2c2c2c;
    
    &:active {
      background: #3a3a3a;
    }
  }
  
  .item-title {
    color: #fff !important;
  }
  
  .item-subtitle, .item-desc {
    color: #ccc !important;
  }
  
  .item-time {
    color: #aaa !important;
  }
  
  .tag {
    background: #3a3a3a !important;
    color: #ccc !important;
  }
}
</style>
